<template>
  <div class="component">
    <app-header title="比亚迪大数据分析平台"></app-header>
    <div class="main-block">
      <!-- 媒体舆情 -->
      <h3 class="main-list-title">媒体舆情</h3>
      <ul class="main-list">
        <router-link :to="{ name: item.router }" class="main-list-item" v-for="(item, index) in mainMenu" :key="index" v-if="item.pid === 2">
          <div class="main-icon">
            <i class="iconfont" :class="item.icon"></i>
            <span class="main-icon-info" v-if="item.name === '工单处理'">{{item.count}}</span>
          </div>
          <span class="main-icon-title">{{item.name}}</span>
        </router-link>
      </ul>
      <!-- 个人舆情 -->
      <h3 class="main-list-title">个人舆情</h3>
      <ul class="main-list">
        <li class="main-list-item" v-for="(item, index) in mainMenu" :key="index" v-if="item.pid === 3">
          <div class="main-icon">
            <i class="iconfont" :class="item.icon"></i>
          </div>
          <span class="main-icon-title">{{item.name}}</span>
        </li>
      </ul>
      <!-- 产品剖析 -->
      <h3 class="main-list-title">产品剖析</h3>
      <ul class="main-list">
        <li class="main-list-item" v-for="(item, index) in mainMenu" :key="index" v-if="item.pid === 4">
          <div class="main-icon">
            <i class="iconfont" :class="item.icon"></i>
          </div>
          <span class="main-icon-title">{{item.name}}</span>
        </li>
      </ul>
    </div>
    <app-footer :active="1"></app-footer>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import AppFooter from '@/components/common/AppFooter'
import { mainMenu } from '@/assets/js/config'
import http from '@/assets/js/http'
import jsonp from 'jsonp'
import qs from 'qs'
import $ from 'jquery'

const domain = 'http://10.16.30.159:9993'

let params = {
  userName: '2625153',
  passwd: '123'
}

export default {
  name: "",
  data() {
    let data = {}
    data.mainMenu = mainMenu
    return data
  },
  created() {
    this.mainMenu.map(item => {
      if(item.name === '工单处理') {
        item.count = 0
      }
    })
    this.init()
  },
  methods: {
    init() {
      // this.get()
      // this.post()
      this.getList()
      // this.getList2()
    },
    get() {
      http.get('/appInterface/login.do', params)
        .then(result => {
          console.log(result)
        })
    },
    post() {
      http.post('/appInterface/login.do', params)
        .then(result => {
          console.log(result)
        })
    },
    getList() {
      const param = {
        json: {
          "articlePcategory":"","mark":"","principalCarBrandId":"1","opinionsType":"微博","startTime":1528646400000,"endTime":1531324799000,"others":{"from":0,"size":10,"needReprint":"true"}
        },
        command: 'spring:article',
        method: 'getArticleList',
        userName: '2625153'
      }
      http.getData(param)
        .then(result => {
          console.log('list', result)
        })
    },
    getList2() {
      const param = {
        command: 'spring:article',
        method: 'updateEsFields',
        json: {
          "startTime":1531476552834,
          "endTime":1531476552834,
          "others":{
            "id":"新浪微博&&1531219380000&&2043b1c8f020a8e3cfcd1884fe08381a14ea5881c6b2b9fb54d2166ae796d90a&&SUV大咖_",
            "manualEventDescription":"123123123123"
          }
        }
      }
      http.getData(param)
        .then(result => {
          console.log(222, result)
        })
    }
  },
  components: {
    AppHeader,
    AppFooter,
  }
}
</script>
<style lang="less" scoped>
  @import '../assets/less/default.less';
  .main-list-title {
    font-size: 0.3rem;
    line-height: 0.5rem;
    margin-left: 0.2rem;
    font-weight: bold;
    color: #000;
  }
  .main-list {
    display: flex;
    box-sizing: border-box;
    padding-bottom: .1rem;
    border-bottom: .3rem @border solid;
    &:last-child {
      border-bottom: none;
    }
    .main-list-item {
      width: 25%;
      text-align: center;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      .main-icon {
        position: relative;
        text-align: center;
        box-sizing: border-box;
        padding: .1rem .2rem 0;
        .iconfont {
          font-size: 0.8rem;
          color: @blue;
        }
        .main-icon-info {
          @height: .35rem;
          position: absolute;
          right: .2rem;
          top: 0;
          color: #ffffff;
          background: @red;
          width: @height;
          height: @height;
          display: block;
          text-align: center;
          font-size: .2rem;
          line-height: @height;
          border-radius: 50%;
        }
      }
      .main-icon-title {
        font-size: .25rem;
        color: @grey;
      }
    }
  }
</style>
